<template>
  <div>
    <el-container class="all-bg">
      <el-row :gutter="10" class="head">
        <el-col :span="6" class="logo">
          <logo></logo>
        </el-col>
        <el-col :span="18">
          <div class="nav">
            <span class="nav-item">首页</span>
            <span class="nav-item">发现</span>
            <span class="nav-item">服务</span>
            <span class="nav-item">更多</span>
            <span class="nav-item">加入我们</span>

            <span class="sub-nav-item">登录/注册</span>
          </div>
        </el-col>
      </el-row>

      <el-row class="rest-content">
        <div class="main-bg">
          <el-col :span="12" class="left">
            <div>

            </div>
            <div class="login-table">
              <div class="table-title">WELCOME</div>
              <div class="sub-table-title">皇家伯爵，我的伙伴</div>
              <el-form ref="loginForm" class="form" :model="form" :rules="rules">
                <el-form-item  prop="account">
                  <el-input
                      ref="account"
                      class="table-margin table-shadow-border"
                      v-model="form.account"
                      placeholder="请输入账号"
                      suffix-icon="el-icon-user"
                      prefix="账号"
                      style="width:400px"
                  ></el-input>
                </el-form-item>
                <el-form-item  prop="password">
                  <el-input
                      ref="password"
                      class="table-margin table-shadow-border"
                      placeholder="请输入密码"
                      v-model="form.password"
                      suffix-icon="el-icon-view"
                      show-password
                      prefix="密码"
                  ></el-input>
                </el-form-item>

                <el-button v-on:click="login('loginForm')" type="primary" style="width:120px;height:50px;font-size:25px"
                >登录
                </el-button
                >
              </el-form>
            </div>
          </el-col>
          <el-dialog
              title="温馨提示"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose">
            <span>请输入账号和密码</span>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确定</el-button>
          </span>
          </el-dialog>
          <el-col :span="12" class="slide-bg">
            <img src="../assets/login_bg2.png" alt="图片"/>
          </el-col>
        </div>
      </el-row>
    </el-container>
  </div>
</template>

<script>
import Logo from "@/components/Logo";

export default {
  components: {
    Logo,
  },
  methods: {

    login(formName) {
      //为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.form.account !="zf" || this.form.password!="2012190320") {
//只是为了做登录效果，所以账号密码写的固定的。
            this.$message.error('账号密码不正确');
            return false;
          }else{
            this.$message.success('登录成功')
            this.$router.push('home')
          }
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    },
  },
  data() {
    return {
      form: {
        account: "",
        password: "",
      },
      rules: {
        account: [
          {required: true, message: '账号不可为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不可为空', trigger: 'blur'}
        ]
      },
      //对话框显示和隐藏
      dialogVisible: false,
      propertyIndexs: [],
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.all-bg {
  background: linear-gradient(to left, rgb(97, 100, 253), rgb(117, 203, 253));
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.rest-content {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

/*header样式*/
.nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav span {
  color: white;
  font-size: 20px;
  margin-right: 2.5rem;
  margin-top: 1rem;
}

.nav-item {
  text-shadow: 5px 5px 5px rgba(52, 54, 155, 0.5);
}

.nav .sub-nav-item {
  background-color: white;
  color: rgb(109, 111, 252);
  padding: 10px 20px;
  border-radius: 20px;
}

.logo {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

/*插图*/
.slide-bg {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;

}

.slide-bg img {
  height: 80%;
  object-fit: contain;
  margin-right: 4rem;
}

/*背景样式*/

.main-bg {
  border-radius: 20px;
  box-shadow: 8px 8px 6px rgba(85, 86, 99, 0.9), 4px 4px 0px white inset;
  background-color: rgb(250, 250, 250);
  height: 80%;
  width: 80%;
  margin: auto;
}

/*表单样式 */
.left {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.login-table {
  box-sizing: border-box;
  padding: 10%;
  height: 100%;
  margin: auto;

  /* position: relative;
  top: -100px; */

}

.form {
  margin: auto;

}

.el-input, .el-button {

}

.form >>> .el-input__inner {
  margin-top: 1rem;
  height: 3rem;

}

.form .el-button {
  margin-top: 20px;
  height: 2.5rem;
  border-radius: 20px;
  background: linear-gradient(to right, rgb(97, 167, 252), rgb(86, 89, 255));
  border: 0px;
}

.table-title {
  font-size: 2rem;
  color: rgb(46, 40, 40);
  font-weight: bold;
}

.sub-table-title {
  color: gray;
  font-size: 0.95rem;
  margin-left: 10px;
}

/* 输入框、按钮样式 */
.table-margin {
  margin-top: 1rem;
}

button.table-margin {
  width: 100%;
}

/* 链接样式 */
.table-link {
  display: flex;
  justify-content: flex-end;
}

.table-link a {
  margin: 0px 1rem;
}
</style>